<!--
 * @Author: Haochen
 * @Date: 2021-12-07 15:51:58
 * @LastEditTime: 2021-12-14 12:07:48
 * @FilePath: \students-system\src\views\register\Register.vue
-->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户注册</span>
      </div>
      <el-form
        :model="newUser"
        :rules="rules"
        ref="registerForm"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model.lazy="newUser.username"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="密码" prop="password">
          <el-input v-model.lazy="newUser.password" type="password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="register('registerForm')"
            >立即注册</el-button
          >
          <el-button @click="resetForm('registerForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-form :model="user" ref="form" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model.lazy="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model.lazy="user.password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form> -->
    </el-card>
  </div>
</template>

<script>
import { isValidPass, isValidUsername } from './validate';

export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入用户名'));
      } else if (!isValidUsername(value)) {
        return callback(
          new Error(
            '用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为3-15个字符'
          )
        );
      } else {
        setTimeout(() => {
          if (this.newUser.username !== '') {
            if (this.$refs.registerForm) {
              this.$refs.registerForm.validateField('username');
            } else return;
          }

          callback();
        }, 1000);
      }
    };

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'));
      } else if (!isValidPass(value)) {
        return callback(
          new Error('密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线')
        );
      } else {
        setTimeout(() => {
          if (this.newUser.password !== '') {
            if (this.$refs.registerForm) {
              this.$refs.registerForm.validateField('password');
            } else return;
          }
          callback();
        }, 1000);
      }
    };

    return {
      newUser: {},
      rules: {
        username: [
          { required: true, validator: validateUsername, trigger: 'blur' },

          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' },
          // { validator: validatePass, trigger: 'blur' },
        ],
      },
    };
  },

  methods: {
    register(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$api.users.register(this.newUser);

          if (res.code) {
            this.$message({
              type: 'success',
              message: '注册成功，去登录',
            });

            this.$router.push('/login');
          } else {
            this.$message({
              type: 'warning',
              message: res.message,
            });
          }
        } else {
          this.$message.error('信息输入有误，请校验后再提交');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin: 200px auto;
}
</style>
